<template>
  <div class="p-2">
  
    
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="48px">
          <el-form-item label="学年" prop="courseYear">
            <el-select v-model="queryParams.courseYear" placeholder="请选择学年" clearable>
              <el-option v-for="dict in sys_stu_year" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="courseArea">
            <el-cascader
              clearable
              filterable
              placeholder="省/市/区"
              :options="addRessList"
              :props="cityProps"
              v-model="queryParams.courseArea"
              popper-class="pc-sel-area-cascader"
              @change="areaCodeChange"
            />
          </el-form-item>
          <el-form-item label="学校" prop="courseDept">
            <!-- <el-tree-select
            clearable
                v-model="queryParams.schoolId"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="选择学校"
                 :render-after-expand="false"
              /> -->
            <el-select v-model="queryParams.courseDept" placeholder="请选择学校" clearable>
              <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
            </el-select>
          </el-form-item>
          
         
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           
          </el-form-item>
        </el-form>
  
   

    <el-card shadow="never">

      <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange">
        <el-table-column label="地区" align="center" prop="courseArea">
          <template #default="scope">
            {{getFullAddress(scope.row.courseArea)}}
          </template>
        </el-table-column>
        <el-table-column label="学年" align="center" prop="courseYear">
          <!-- <template #default="scope">
            <dict-tag :options="sys_common_status" :value="scope.row.buildName"/>
          </template> -->
        </el-table-column>
        
        <el-table-column label="学校" align="center" prop="courseDept">
          <template #default="scope">
            {{getTenantById(tenantOptions,scope.row.courseDept)}}
          </template>
        </el-table-column>
        <el-table-column label="开出率" align="center" prop="rate">
        </el-table-column>
    
       
      
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
            layout="total, prev, pager, next"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>
 
  </div>
</template>

<script setup name="Room" lang="ts">
import { openCourseRate,chartBySchool, getRoom, delRoom, addRoom, updateRoom } from '@/api/core/home';
import { ChartSchoolVO, ChartSchoolQuery, RoomForm } from '@/api/core/home/types';
import cityData from '@/assets/json/pca-code.json';
const addRessList = ref(cityData);
const cityProps = reactive({
  emitPath: false,
  value: 'code', //指定选项的值为addresslist对象的code属性
  label: 'name', //指定选项标签为addresslist对象的name属性
  children: 'children' //指定选项的子选项为addresslist对象的children属性
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_common_status, sys_normal_disable,sys_stu_year } = toRefs<any>(proxy?.useDict('sys_common_status', 'sys_normal_disable','sys_stu_year'));
const roomList = ref<ChartSchoolVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

import { getSubjectNameById,getTeacherNameById,getTenantById } from '@/utils/index';
import { useSchoolList,useTenantlList } from '@/composables/useSchoolList';
const { deptOptions, fetchSchoolList } = useSchoolList();
//学校改租户数据
const { tenantOptions, fetchTenantlList,tenantDisabled} = useTenantlList();

const initFormData: RoomForm = {
  id:undefined,
  courseYear: undefined,
  coursePeriod: undefined,
  courseGrade: undefined,
  subjectName:undefined,
  courseArea:undefined,
  deptName:undefined,
  courseDate:undefined,
  courseDateEnd:undefined,
  rate: undefined,
}
const data = reactive<PageData<RoomForm, ChartSchoolQuery>>({
  form: {...initFormData},
  queryParams: {
    // pageNum: 1,
    // pageSize: 10,
    // id: undefined,
    courseYear: undefined,
    courseDept: undefined,
    // buildFloor: undefined,
    courseArea: undefined,
    // params: {
    // }
  },

});

const { queryParams, form, rules } = toRefs(data);

const areaCodeChange = (e)=>{
  console.log('地区选择',e)
  //根据地区重新获取学校数据
  fetchTenantlList(e);
  //重置学校数据
  queryParams.value.courseDept = undefined;
}

/** 查询学校开课率 */
const getList = async () => {
  loading.value = true;
  const res = await openCourseRate(queryParams.value);
  console.log('学校开课率',res.data);
  roomList.value = res.data;
  total.value = res.total;
  loading.value = false;
}

// 根据 districtId 查找对应的完整地址路径，跳过市辖区
const getFullAddress = (districtId) => {
  const findDistrict = (list, id, path = []) => {
    for (let item of list) {
      if (item.code == id) {
        path.push(item.name);
        return path.join('/');
      }
      if (item.children && item.children.length > 0) {
        if (item.name !== '市辖区') {
          path.push(item.name);
        }
        const result = findDistrict(item.children, id, path);
        if (result) {
          return result;
        }
        if (item.name !== '市辖区') {
          path.pop(); // 回溯
        }
      }
    }
    return null;
  };

  const address = findDistrict(addRessList.value, districtId);
  return address || '未知';
};


/** 搜索按钮操作 */
const handleQuery = () => {
  // queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}


onMounted(() => {
  getList();
  // getSchoolList();
});
</script>
<style scoped lang="scss">
:deep(.el-card){
 border: none !important;
}
</style>